<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ page import="com.lkj.model.User" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="Cache-Control" content="no-siteapp">
<title>华纵科技</title>
    <link type="text/css" href="../../../bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link type="text/css" href="../../../bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet">
    <link type="text/css" href="../../../css/theme.css" rel="stylesheet">
    <link type="text/css" href="../../../images/icons/css/font-awesome.css" rel="stylesheet">
    <link type="text/css" href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600'
          rel='stylesheet'>
    <link type="text/css" href="../../../bootstrap/css/bootstrap-datetimepicker.min.css" rel="stylesheet">

<script type="text/javascript">


</script>
</head>
<body class="kh-body">
    <%--头部开始--%>
    <div class="navbar navbar-fixed-top">
        <div class="navbar-inner">
            <div class="container" style="width: 90%;">
                <a class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-inverse-collapse">
                    <i class="icon-reorder shaded"></i></a><a class="brand" href="index.html">视频分析及LKJ </a>
                <div class="nav-collapse collapse navbar-inverse-collapse">
                   <%-- <ul class="nav nav-icons">
                        <li class="active"><a href="#"><i class="icon-envelope"></i></a></li>
                        <li><a href="#"><i class="icon-eye-open"></i></a></li>
                        <li><a href="#"><i class="icon-bar-chart"></i></a></li>
                    </ul>
                    <form class="navbar-search pull-left input-append" action="#">
                        <input type="text" class="span3">
                        <button class="btn" type="button">
                            <i class="icon-search"></i>
                        </button>
                    </form>--%>
                    <ul class="nav pull-right">
                       <%-- <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown
                            <b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">Item No. 1</a></li>
                                <li><a href="#">Don't Click</a></li>
                                <li class="divider"></li>
                                <li class="nav-header">Example Header</li>
                                <li><a href="#">A Separated link</a></li>
                            </ul>
                        </li>--%>
                        <%   User user = (User) request.getSession().getAttribute("user");   %>
                        <li><a href="#"><%=user.getUsername()%></a></li>
                        <li class="nav-user dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">
                            <img src="../../../images/user.png" class="nav-avatar">
                            <b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">Your Profile</a></li>
                                <li><a href="#">Edit Profile</a></li>
                                <li><a href="#">Account Settings</a></li>
                                <li class="divider"></li>
                                <li><a href="#" onclick="logout()">退出</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
                <!-- /.nav-collapse -->
            </div>
        </div>
        <!-- /navbar-inner -->
    </div>
    <%--头部结束--%>

    <div class="wrapper">
        <div class="container" style="width: 90%;">
            <div class="row">
                <%--导航区s--%>
                <div class="span3">
                    <div class="sidebar">
                        <ul class="widget widget-menu unstyled">
                            <li><a href="<%=request.getContextPath()%>/client/todayArrive"><i class="menu-icon icon-bold"></i> 今日到站 </a></li>
                            <li><a href="<%=request.getContextPath()%>/client/dataSummary"><i class="menu-icon icon-book"></i> 统计汇总 </a></li>
                            <li><a href="<%=request.getContextPath()%>/client/irregularities"><i class="menu-icon icon-paste"></i> 违规操作单 </a></li>
                        </ul><!--/.widget-nav-->
                    </div><!--/.sidebar-->
                </div>
                <%--导航区e--%>

                <!--/.span3-->
                <div class="span9" style="width: 80%;">
                    <div class="content">
                        <div class="module">
                            <div class="module-head">
                                <h3>统计</h3>
                            </div>
                            <br />

                            <form class="form-horizontal row-fluid">
                                <div class="control-group">
                                    <div class="controls">

                                        <label class="control-label span1" for="basicinput" style="line-height: 2;margin-right: 14px;">选择时间:</label>

                                        <label class="control-label span3" for="basicinput" style="margin-left: 0px;float: left;">
                                            <div class="input-group date form_datetime  span5" id="sform" style="line-height: 0px;">
                                                <input class="form-control span12" type="text" placeholder="开始时间" id="start_time" readonly="true" value="">
                                                <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                                            </div>
                                            <div class="span1" style="line-height:  2;">~~</div>
                                            <div class="input-group date form_datetime  span5" id="eform" style="line-height: 0px;">
                                                <input class="form-control span12" type="text" placeholder="结束时间" id="end_time" readonly="true" value="">
                                                <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                                            </div>
                                        </label>

                                        <label class="control-label span2" for="basicinput">车次:
                                            <select tabindex="1" data-placeholder="Select here.." class="span8">
                                                <option value="" disabled>Select here..</option>
                                                <option value="Category 1">First Row</option>
                                                <option value="Category 2">Second Row</option>
                                                <option value="Category 3">Third Row</option>
                                                <option value="Category 4">Fourth Row</option>
                                            </select>
                                        </label>

                                        <label class="control-label span2" for="basicinput">严重等级:
                                            <select tabindex="1" data-placeholder="Select here.." class="span8">
                                                <option value="" disabled>Select here..</option>
                                                <option value="Category 1">First Row</option>
                                                <option value="Category 2">Second Row</option>
                                                <option value="Category 3">Third Row</option>
                                                <option value="Category 4">Fourth Row</option>
                                            </select>
                                        </label>
                                    </div>
                                </div>
                            </form>
                            <div class="module-body">
                                <div class="chart pie donut interactive">
                                    <div id="pie-interactive" class="graph">
                                    </div>
                                    <div id="hover">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--/.module-->
                    </div>
                    <!--/.content-->
                </div>
                <!--/.span9-->
            </div>
        </div>
    </div>


</body>
<script src="../../../scripts/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="../../../scripts/jquery-ui-1.10.1.custom.min.js" type="text/javascript"></script>
<script src="../../../bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="../../../scripts/flot/jquery.flot.js" type="text/javascript"></script>
<script src="../../../scripts/flot/jquery.flot.pie.js" type="text/javascript"></script>
<script src="../../../bootstrap/js/bootstrap-datetimepicker.js" type="text/javascript"></script>
<script src="../../../bootstrap/js/bootstrap-datetimepicker.zh-CN.js" type="text/javascript"></script>
<%--<script src="../../../scripts/common.js" type="text/javascript"></script>--%>
<script src="../../../js/common.js"></script>
<script>
    $(document).ready(function () {
        // PREDEFINED DATA
        var data = [
            { label: "Series1", data: [[1, 10]] },
            { label: "Series2", data: [[1, 30]] },
            { label: "Series3", data: [[1, 90]] }
        ];


        // DEFINE ACTIONS FOR pieHover & pieClick
        function pieHover(event, pos, obj) {
            if (!obj)
                return;
            percent = parseFloat(obj.series.percent).toFixed(2);
            $("#hover").html('<span>' + obj.series.label + ' - ' + percent + '%</span>');
        }

        function pieClick(event, pos, obj) {
            if (!obj)
                return;
            percent = parseFloat(obj.series.percent).toFixed(2);
            alert('' + obj.series.label + ': ' + percent + '%');
        }

        // DONUT + INTERACTIVE
        $.plot($("#pie-interactive"), data,
            {
                series: {
                    pie: {
                        innerRadius: 50,
                        show: true
                    }
                },
                grid: {
                    hoverable: true,
                    clickable: true
                }
            });

        $("#pie-interactive").bind("plothover", pieHover);
        $("#pie-interactive").bind("plotclick", pieClick);


        //初始化日期控件
        $(".form_datetime").datetimepicker({
            format:'yyyy/mm/dd',
            language:'zh-CN',
            minView: "month",
            todayBtn:  1,
            autoclose: 1,
        })

        $("#sform").datetimepicker({
            format:'yyyy/mm/dd',
            language:'zh-CN',
            minView: "month",
            todayBtn:  1,
            autoclose: 1,
        }).on('show', function (ev) {//在控件显示时就触发事件
            var etime = $("#end_time").val();//获取结束时间
            $("#sform").datetimepicker('setEndDate', etime);//给开始控件设置一个结束的日期。
        });
        $("#eform").datetimepicker({
            format:'yyyy/mm/dd',
            language:'zh-CN',
            minView: "month",
            todayBtn:  1,
            autoclose: 1,
        }).on('show', function (ev) {
            var stime = $("#start_time").val();
            $("#eform").datetimepicker('setStartDate', stime);//给结束控件设置一个开始日期
        });
    })
</script>
</html>
